<template>
  <div class="Log">

    <div class="text">
          <h3 class="title">森林病虫害防治系统</h3>
    <el-form ref="" :model="user" :rules="rules" class="login-box">
      <h3 class="logi-title">欢迎登录</h3>
      <img src="../img/1.jpg" alt="阿勒，图片不见啦" class="img" />
      <el-form-item label="用户名" prop="userName" >
        <el-input
          type="text"
          placeholder="请输入用户名"
          v-model="user.userName"
          class="bo1"
        ></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="userPwd">
        <el-input
          type="text"
          placeholder="请输入密码"
          v-model="user.userPwd"
          class="bo2"
        ></el-input>
      </el-form-item>

      <el-form-item class="login-bttton">
        <el-button type="primary" @click="Login(user)">登录</el-button>
      </el-form-item>
    </el-form>

    <h2 class="h2"></h2>
    </div>


  </div>
</template>

<script>

import { mapState, mapMutations, mapActions } from "vuex";

export default {
  name: "Login",

  data() {
    return {
      user: {
        userName: "",
        userPwd: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],

        userPwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
   computed:{
        ...mapState('login',['loginUser'])

    },

  methods: {

    ...mapMutations("login", ["setloginUser"]),
    ...mapActions("login", ["findUser"]),

    async Login() {
      let info = await this.ajax.getSubmit("/api/user/Login", {
        userName: this.user.userName,
        userPwd: this.user.userPwd,
      });

      console.log(this.user.userName + this.user.userPwd);

      console.log(info.userRoot);

      console.log("登录对象" + JSON.stringify(info));

      if (info == "") {
        alert("用户名或密码错误");
        return;
      }

      //把信息放入store中
      this.setloginUser(info);


      if (info.userRoot == "超级管理员") {
        this.$router.push("/main");
      } else if (info.userRoot == "资料管理员") {
        this.$router.push("/main");
      } else if (info.userRoot == "灾情管理员") {
        this.$router.push("/main");
      }else if (info.userRoot == "专家管理员") {
        this.$router.push("/main");
      }else if (info.userRoot == "库房管理员") {
        this.$router.push("/main");
      }
    },

  },
  
};
</script>

<style scoped>

.Log{
  width: 1000px;
  height: 650px;
  margin: 100px auto;
  overflow: hidden;
  border: 1px solid black;
  background: #dcdfe6;

}

.text{
  margin: 0 auto;
}

.title {
  margin: 0px auto;
  text-align: center;
  border-bottom: 1px solid black;
}

.login-box {
  width: 350px;
  margin: 10px auto;
  border: 1px solid #dcdfe6;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 30px #dcdfe6;
}
.logi-title {
  text-align: center;
}

.login-bttton {
  margin-left: 150px;
}
.h2{
  border-top: 1px solid black;
}



</style>>

